<template>
    <footer class="footer">
        <section class="box-container">
            <div class="box">
                <router-link to="/layout/about">关于我们</router-link>
                <router-link to="/layout/contract">联系我们</router-link>
                <router-link to="/layout/image">图片</router-link>
                <router-link to="/login">登录</router-link>
            </div>
        </section>
        <div class="credit">
            acming © 2024
            <span class="sm-hidden"> | Team & Agreements</span>
        </div>
    </footer>

</template>



<script setup>
</script>

<style lang="scss" scoped>
.footer {
    background-color: #7878;
}

.footer .box-container {
    padding-top: 2rem;
}

.footer .box-container .box {
    display: flex;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: center;
    text-align: center;
}

.footer .box-container .box a {
    cursor: pointer;
    font-size: 1.8rem;
    padding: 1rem 0;
    color: #222;
    display: block;
}

.footer .box-container .box a:hover {
    color: yellow;
    text-decoration: underline;
}

.footer .credit {
    text-align: center;
    padding: 1rem 3rem;
    font-size: 1.4rem;
}

.footer .credit span {
    color: chocolate;
}

@media (max-width:768px) {
    .footer .credit {
        font-size: 1.6rem;
    }
}
</style>